<template>
    <div>
        <Tabs value="name1">
            <TabPane label="图片切换" name="name1" style="height: 630px;">
                <Row>
                    <!--
                    说明:
                        1. v-bind:${属性名称}表示给对应的属性绑定动态的值;
                        2. v-show: 接受一个产生boolean值的表达式, 如果该表达式的值为true就显示该元素, 否则隐藏该元素.
                    -->
                    <img v-bind:src="imgs[index]" style="height: 100px; width: 100px" />
                    <a v-show="index > 0" v-on:click="prevImg" href="#">上一张</a>
                    <a v-show="index < imgs.length -1" v-on:click="nextImg" href="#">下一张</a>
                    <Button button-message="点击一下"></Button>
                </Row>
            </TabPane>
            <TabPane label="自定义组件" name="name2">
                <MySelect @selectFunc="selectFunc" :data="optionList"></MySelect>
                <MySelect2 @selectFunc="selectFunc2" :data="optionList"></MySelect2>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    import Button from "@/components/Button";
    import MySelect from "@/components/MySelect";
    import MySelect2 from "@/components/MySelect2";

    export default {
        //设置导出的组件的名称
        name: "Command",
        components: {MySelect, Button, MySelect2},
        //设置导出的组件中的数据
        data: function() {
            return {
                index: 0,
                imgs: [
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404549&di=8519ca28ff822fd453f7492c0bcc820c&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160506%2Fef10a11e89c345b48a3bd0fcfcdbbc2a_th.png',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404548&di=338f629b5ae6331d05a477736de6e239&imgtype=0&src=http%3A%2F%2F6352123.s21i-6.faiusr.com%2F4%2FABUIABAEGAAgnfDzrAUoj5DfjQMwgAQ4gAQ.png',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404548&di=d4464685a09983fdab108c385c373531&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F0bd162d9f2d3572c2850429d8913632763d0c3c5.jpg'
                ],
                optionList: [
                    {
                        name: "ss1",
                        value: 1
                    },
                    {
                        name: "ss2",
                        value: 2
                    },
                    {
                        name: "ss3",
                        value: 3
                    }
                ]
            };
        },
        //设置导出组件时的函数
        methods: {
            prevImg: function () {
                this.index--;
            },
            nextImg: function () {
                this.index++;
            },
            selectFunc(value) {
                window.console.log(value);
            },
            selectFunc2(value) {
                window.console.log(2, value);
            }
        }
    }
</script>

<style scoped>

</style>